var socket;
var AU;
var myname;
var users = []; //当前房间用户
var prjs=[];//项目
var isLeader=false;//是否房主
var initRoom = 0; //初始房间号码
localStorage.setItem('roomIns', initRoom);
window.onload = function() {
	socket = io.connect('ws://10.87.18.99:3000');
	AU = $('#aubtn').get(0);
	//成员加入
	socket.on('userin', function(data) {
		users=data.users;
		setUsers(users);
	})

	//静音
	$('.ic_audio').on('click', function() {
		if($(this).hasClass('not')) {
			$('#bgm').get(0).play();
			$(this).removeClass('not');
		} else {
			$('#bgm').get(0).pause();
			$(this).addClass('not');
		}

	})
	/*//输入框输入不超过四个字符
	$('.step1 .name').on('input', function() {
		var val = $(this).val();
		if(val.length > 5) {
			$(this).val(val.substr(0, 5));
		}
	})*/
	//提交姓名
	$('.step1 .subm').on('click', function() {
		pp();
		var name = $('.step1 .name').val().trim();
		if(!name.length) {
			layer.alert('请输入名字');
			return;
		}
		if(name.length > 4) {
			layer.alert('名字最多4个字符');
			return false;
		}
		$.ajax({
			url: main + '/addUser',
			type: 'post',
			dataType: 'json',
			data: {
				name: name
			},
			success: function(dt) {
				console.log(dt);
				if(dt.flag) {
					//成功
					layer.msg('添加成功');
					localStorage.setItem('myname', name);
					myname = name;
					$('.step1').addClass('animated bounceOutDown');
					setTimeout(function() {
						$('.step1').hide();
						$('.step2').addClass('animated bounceInDown').show();
					}, 1000);
				} else {
					layer.msg(dt.msg);
				}
			}
		})
	})

	//创建房间
	$('.step2 .btn_new').on('click', function() {
		pp();
		var name = localStorage.getItem('myname');
		var orRoom = localStorage.getItem('roomIns');
		var room = 'room' + (Number(orRoom) + 1);
		localStorage.setItem('roomIns', Number(orRoom) + 1);
		socket.emit('join', {
			name: name,
			roomID: room,
			creat: true
		});
		socket.on('msg', function(msg) {
			if(msg.flag) {
				var lid = layer.alert('创建成功,房间号:' + room, function() {
					$('.step2').hide();
					$('.step3').show();
					layer.close(lid);
					isLeader=true;
					init(room);
				});
			} else {
				layer.alert(msg.msg);
			}
		})
	})

	//加入房间
	$('.step2 .btn_join').on('click', function() {
		$('.step2').removeClass('bounceInDown').addClass('animated bounceOutDown');
		setTimeout(function() {
			$('.step2').hide();
			$('.joinroom').addClass('animated bounceInDown').show();
		}, 1000)
	})
	//加入房间确认
	$('.joinroom .subm').on('click', function() {
		var roomnum = $(this).siblings('.roomid').val();

		if(!typeof(roomnum) == 'number') {
			layer.alert('请输入有效数字');
			return;
		}
		socket.emit('join', {
			name: myname,
			roomID: 'room' + roomnum,
			creat: false
		});
		socket.on('msg', function(dt) {
			console.log(dt);
			if(dt.flag) {
				$('.joinroom').removeClass('bounceInDown').addClass('bounceOutDown').hide();
				$('.step3').show();
				init(roomnum);
			} else {
				layer.alert(dt.msg);
			}
		})
	})

	//初始化房间
	function init(room) {
		$('.step3 header span').text(room);
		users.push(localStorage.getItem('myname'));
		setUsers(users);
		if(isLeader){
			$('.setopts').show();
			$('.loading').hide();
		}else{
			$('.setopts').hide();
			$('.loading').show();
		}
	}

	function setUsers(user) {
		var _li = '';
		if(user && user.length) {
			user.forEach(function(item, index) {
				_li += '<li>' + item + '</li>';
			})
		}
		$('.step3 .users ul').empty().append(_li);
	}

	//返回上次一层
	$('.back').on('click', function() {
		pp();
		$('.step3').hide();
		$('.step2').show();
	})
	//播放音效
	function pp() {
		if(AU.ended) {
			AU.play();
		} else {
			AU.pause();
			//		AU.play();
		}

	}
	
	var pnum=1;
	var pmax=10;//项目最多数
	//添加惩罚项目
	$('.step3 .btnadd').on('click',function(){
		if(pnum>=pmax){
			layer.msg('最多添加10项');
			return;
		}
		pnum++;
		var _li='<li><label for=opt'+pnum+'>Num'+pnum+':</label>';
		_li+='<input id=opt'+pnum+'type="text" placeholder="请输入。。。"/></li>';
		$('.step3 .setopts ul').append(_li);
	})
	//添加完成
	$('.step3 .btndone').on('click',function(){
		
		var flag=false;;
		//检查非空项
		$('.step3 .setopts ul li').each(function(index,item){
			var th_val=$(item).find('input').val();
			if(!th_val.trim()){
				layer.msg('请输入内容！');
				$(item).find('input').focus();
				flag=true;
				return false;
			}
		})
		if(flag){return;}
		$('.step3 .setopts ul li').each(function(index,item){
			prjs.push($(item).find('input').val());
		})
		console.log(prjs);
		$('.step3 .setopts').hide();
		createPie();
		$('.step3 .zhuanpan').show();
		socket.emit('done',{ok:true});
	})
	
	//监听是否房主已经制作好表盘
	socket.on('done',function(dt){
		if(dt.ok){
			$('.step3 .loading').hide();
			createPie();
			$('.step3 .zhuanpan').show();
		}
	})
//	prjs=[11,22,33,44,55,66,7777,88,99,'00','aa','bb'];
//		createPie();
	window.onresize=function(){
		createPie();
	}
	var adeg;//每个扇形度数
	function createPie(){
		//生成转盘
		var items=prjs;
		var colors=['#FE5CFF','#1BFFFF','#F7BE33','#FFFD01'];
		var can=$('.ctx').get(0),
			ctx=can.getContext('2d'),
			starAng=0,//开始角度
			incNum=360/items.length,
			endAng=0;//结束角度
			can.width=$('.zhuanpan').width();
			can.height=$('.zhuanpan').height();
			ctx.translate(can.width/2,can.height/2);
			for(var i=0;i<items.length;i++){
				starAng=i*incNum;
				endAng=starAng+incNum;
				ctx.save();
				ctx.beginPath();
				ctx.fillStyle=colors[i%(colors.length)];
				ctx.moveTo(0,0);
				ctx.arc(0,0,can.width/2,starAng*Math.PI/180,endAng*Math.PI/180,false);
				ctx.closePath();
				ctx.fill();
 				
			}
			
			//生成文字
			_txt='';
			adeg=360/prjs.length;
			for(var i=0;i<prjs.length;i++){
				_txt+='<p style="transform:rotate('+(adeg*i+(adeg/2))+'deg)">'+prjs[i]+'</p>';
			}
			$('.zhuanpan .txt').empty().append(_txt);
	
	}
	
	//开始抽奖
	var goal=0;//中奖下标
	$('.zhuanpan .needle').on('click',function(){
		if(!isLeader){
			layer.alert('您不是房主，不能操作 ！');
			rerurn;
		}
		if($(this).hasClass('an_rt')) return;
		
		//确定中奖人员名单
		var gl_user;//中奖人名
		var dom_li=$('.step3 .users li'),
			li_len=dom_li.length,
			li_index=0;
		
		var sid=setInterval(function(){
			li_index++;
			if(li_index>=li_len){
				li_index=0;
			}
			console.log(1111);
			dom_li.eq(li_index).addClass('cur').siblings().removeClass('cur');
		},40)
		
		
		//确定中奖项目
		$(this).addClass('an_rt');
		var that=this;
		setTimeout(function(){
			$(that).removeClass('an_rt');
			goal=(Math.random()*prjs.length) | 0;
			var gldeg=90+goal*adeg+adeg/2;
			$(that).css('transform','rotate('+gldeg+'deg)');
			clearInterval(sid);
			gl_user=$('.step3 .users li.cur').text();
			$('.step3 .alert .msg').text('恭喜'+gl_user+'喜提'+prjs[goal]);
			$('.step3 .alert').show();
		},3000)

	})
	
	//弹窗确定
	$('.step3 .alert button').on('click',function(){
		$('.step3 .alert').hide();
	})
}